<!--
 * @Date: 2023-03-22 16:41:45
 * @LastEditTime: 2023-08-31 11:34:42
 * @FilePath: /wkw/src/tabbar/swap/index.vue
 * 介绍:兑换
-->
<script lang="ts" setup name="swap">
import { addCache } from "@@/hooks/routeCache";
import { useWkLpInfo } from "./wkLoopInfo";
import useTabPageStore from "@@/store/useTabPageStore";
import swap from "./components/swap.vue";
import liquidity from "./components/liquidity.vue";

addCache("swap");
const tabPageStore = useTabPageStore();
const contract_addr = computed(() => tabPageStore.homeData?.wkc.contract_addr);
const { lpCoinEnum, getWkLpInfo, lpInfo } = useWkLpInfo([contract_addr.value!]);
const currentTab = ref(swap.___name);
</script>

<template>
  <CpageView class="swap">
    <Rtabs v-model:active="currentTab" class="Rtabs__1" line-width="220rem">
      <template #nav-right>
        <div class="link flex-A-C">
          <Cicon
            v-show="currentTab == swap.__name"
            @click="$router.push({ name: 'swapLogs' })"
            class="active"
            size="40rem"
            color="var(--C-M1)"
            name="icon-jilu"
          />
          <Cicon
            @click="$router.push({ name: 'swap-kLine' })"
            class="active ML-xs"
            size="40rem"
            color="var(--C-M1)"
            name="icon-kxian"
          />
        </div>
      </template>
      <VanTab :name="swap.__name" :title="$t('dui-huan')">
        <swap :lp-coin-enum="lpCoinEnum" :get-wk-lp-info="getWkLpInfo" />
      </VanTab>
      <VanTab :name="liquidity.__name" :title="$t('liu-dong-xing')">
        <liquidity
          :lp-info="lpInfo"
          :lp-coin-enum="lpCoinEnum"
          :get-wk-lp-info="getWkLpInfo"
        />
      </VanTab>
    </Rtabs>
  </CpageView>
</template>

<style lang="scss" scoped>
.link {
  height: 1.5em;
  .Cicon {
    --size: 75rem;
    height: var(--size);
    width: var(--size);
    line-height: var(--size);
    border-radius: 999rem;
    text-align: center;
    background-color: var(--C-B1);
  }
}
</style>
